<template>
  <div class="videoBox">
    <video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
      <source :src="defaultUrl" />
    </video>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultUrl: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    initVideo() {
      //此处初始化的调用，我放在了获取数据之后的方法内，而不是放在钩子函数mounted
      //页面dom元素渲染完毕，执行回调里面的方法
      this.$nextTick(() => {
        let myPlayer = this.$video(document.getElementById('myVideo'), {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: false,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto',
          // 自适应宽高
          fluid: true,
          // //设置视频播放器的显示宽度（以像素为单位）
          // width: '600px',
          // //设置视频播放器的显示高度（以像素为单位）
          // height: '500px',
          poster: '//vjs.zencdn.net/v/oceans.png',
          controlBar: {
            playToggle: true
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.videoBox {
  width: 100%;
  height: 100%;
}
</style>
